<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../0_assets/vue2.js"></script>
</head>

<body>
    <div id="app" @click="text++">{{ text }}</div>
    <script>
        let app = new Vue({
            el: "#app",
            data() {
                return {
                    text: 111
                }
            },
            // 组件实例被创建之前，执行一些初始化任务
            beforeCreate() {
                console.log('beforeCreate');
            },
            // 组件实例被创建出来之后，常用于异步获取数据
            created() {
                console.log('created');
            },
            // 组件未执行渲染，dom还没创建
            beforeMount() {
                console.log('beforeMount');
            },
            // 初始化已经结束，dom已经创建好了，页面已经渲染完毕，常用于获取访问的数据和dom元素
            mounted() {
                console.log('mounted');
            },
            // 组件数据发生变化之前，获取更新的各种状态
            beforeUpdate() {
                console.log('beforeUpdate');
            },
            // 组件数据更新之后，页面已经渲染完毕
            updated() {
                console.log('updated');
            },
            // 组件实例销毁之前，我们在这里可以做一些清除无用的定时器，解绑事件等操作
            beforeDestory() {
                console.log('beforeDestory');
            },
            // 组件实例被销毁之后，这里可以做和beforeDestory
            destoryed() {
                console.log('destory');
            }
        })
    </script>
</body>

</html>